<template>
  <div class="device-page flex-col">
    <div class="nav-bar-box" :style="{height: (statusH + titleH) + 'px', background:'#FFFFFF'}">
      <div class="nav-bar">
        <div class="nav-status" :style="{height:statusH + 'px'}"></div>
        <div class="nav-head flex-center" :style="{height:titleH + 'px'}">
          <div class="flex-1 flex-row-v-center" style="padding-left: 10px;">
            <!--<img style="width: 22px;height: 22px" src="/static/assets/img/icon/icon-arrow-left.png"-->
            <!--@click="onClickGoBack()"/>-->
          </div>
          <div class="flex-1 flex-center">
            <span style="font-size: 18px; color:#000000">产品中心</span>
          </div>
          <div class="flex-1"></div>
        </div>
      </div>
    </div>

    <div class="device-container flex-col flex-1">
      <div class="search-holder flex-center">
        <div class="search-box flex-row-v-center" style="height: 30px;" @click="onClickGoSearch">
          <img src="/static/assets/img/icon/icon-search.png"/>
          <span style="font-size: 12px;">搜索商品名称</span>
        </div>
      </div>

      <scroll-view class="device-holder flex-1" scroll-y @scrolltolower="getNextList">
        <div style="padding: 10px 12px;">
          <div class="swiper-box" v-if="bannerList.length > 0">
            <Swiper :images="bannerList"/>
          </div>

          <div class="goods-box">
            <div class="goods-title">
              推荐商品
            </div>
            <div class='goods-content'>
              <div class="goods-item" v-for="item in goodsList" :key="item.id" @click="onTapGoodsDetail(item)">
                <div class="img-box">
                  <img mode="scaleToFill" :src="item.coverImg" />
                </div>

                <div class="goods-desc">
                  <div class="title-txt">{{ item.name }}</div>
                  <div class="desc-txt">{{ item.description }}</div>
                  <div class="label-box flex-row-v-center">
                    <span>{{ item.label_name }}</span>
                  </div>
                  <div class="price-box">
                    <span class="current-price-txt">¥{{ item.processPrice }}</span>
                    <span class="original-price-txt">¥{{ item.processGuidePrice }}</span>
                  </div>
                </div>
              </div>
            </div>
            <div class="flex-center tip-txt" v-if="totalPage == currentPage">没有更多了</div>
          </div>
        </div>
      </scroll-view>
    </div>
  </div>
</template>

<script>
  import global from 'global'
  import Swiper from '@/components/swiper'
  import Core from 'core'
  import Common from 'common'

  export default {
    components: { Swiper },
    data () {
      return {
        statusH: global.state.statusH,
        titleH: global.state.titleH,
        navBarHeight: global.state.statusH + global.state.titleH,

        bannerList: [],
        noMoreDataStatus: false,

        currentPage: 1,
        totalPage: 1,
        goodsList: []
      }
    },

    onLoad () {
      // wx.hideTabBar()
      this.currentPage = 1
      this.goodsList = []
      this._getBannerList()
      this._getGoodsList('', this.currentPage)
    },

    methods: {
      getNextList () {
        if (this.currentPage >= this.totalPage) {
          return
        }
        this.currentPage++
        this._getGoodsList('', this.currentPage)
      },

      onClickGoSearch () {
        Common.go(`/pages/搜索/main`)
      },

      onTapGoodsDetail (item) {
        Common.go('/pages/产品中心/详情/main?goods_id=' + item.id)
      },

      _getBannerList () {
        let hospitalId = Core.Data.getHospitalId() || 1
        Core.Api.Goods.bannerList(hospitalId)
          .then(res => {
            this.bannerList = res.banner || []
          })
          .catch(err => {
            Core.Util.showTip('', err.message)
          })
      },

      _getGoodsList (name, page) {
        wx.showLoading({ title: '获取中' })
        Core.Api.Goods.goodsList(name, page)
          .then(res => {
            let goodsList = res.goods_list

            goodsList.forEach(v => {
              v.createTime = Core.Util.timeFormat(v.create_time, 'Y-m-d')
              v.processPrice = Core.Util.processMoney(v.price)
              v.processGuidePrice = Core.Util.processMoney(v.guide_price)
              v.processExpressFee = Core.Util.processMoney(v.express_fee)
              v.coverImg = Core.Util.getImgUrl(v.cover_img)
            })
            if (page === 1) {
              this.goodsList = res.goods_list
            } else {
              this.goodsList = this.goodsList.concat(res.goods_list)
            }
            this.currentPage = page
            this.totalPage = Math.ceil(res.count / 10)

            if (this.totalPage === 0 || this.totalPage === this.currentPage) {
              this.noMoreDataStatus = true
            }

            wx.hideLoading()
          })
          .catch(err => {
            Core.Util.showTip('', err.message)
          })
      },

      onClickGoBack () {
        wx.switchTab({
          url: '/pages/首页/main',
          success: () => {
            wx.showTabBar()
          }
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .device-page {
    width: 100%;
    height: 100%;
    overflow: hidden;

    .nav-bar-box {
      position: relative;
      width: 100%;
    }

    .nav-bar {
      position: fixed;
      width: 100%;
      top: 0;
      .nav-status {
        width: 100%;
      }

      .nav-head {
        width: 100%;
        color: #000000;
        font-size: 16px;
      }
    }

    .device-container {
      height: 100%;
      overflow: hidden;
      background: #f5f5f5;

      .search-holder {
        height: 70px;
        background: #FFFFFF;
        padding: 0 60px;
        .search-box {
          width: 100%;
          height: 34px;
          border-radius: 16px;
          background-color: rgb(245, 246, 247);
          padding: 0 6px;
          img {
            width: 14px;
            height: 15px;
            margin-right: 8px;
          }
          span {
            font-size: 13px;
            color: #afafaf;
          }
        }
      }

      .device-holder {
        overflow-y: auto;
        box-sizing: border-box;

        .swiper-box {
          width: 100%;
          border-radius: 10px;
          overflow: hidden;
        }

        .goods-box {
          margin-top: 4px;
          .goods-title {
            font-size: 16px;
            color: rgb(59, 59, 59);
            padding: 10px 0;
          }

          .goods-content {
            /*column-count: 2;*/
            /*column-gap: 10px;*/
          }

          .goods-item {
            width: calc(50% - 5px);
            border-radius: 4px;
            margin-bottom: 10px;
            background: #FFFFFF;
            overflow: hidden;
            display: inline-block;
            font-size: 0;
            &:nth-child(odd) {
              margin-right: 8px;
            }

            .img-box {
              width: 100%;
              height: 172px;

              img {
                width: 100%;
                height: 100%;
              }
            }

            .goods-desc {
              width:100%;
              padding: 6px 4px;
              display: inline-block;
              font-size: 0;

              .title-txt {
                color: rgb(119, 120, 121);
                font-size: 14px;
                overflow: hidden;
                text-overflow:ellipsis;
                white-space: nowrap;
              }
              .desc-txt {
                color: rgb(143, 143, 145);
                font-size: 12px;
              }
              .label-box {
                padding: 4px 0;
                span {
                  font-size: 10px;
                  background: rgb(30, 181, 205);
                  padding: 3px 4px;
                  line-height: 10px;
                  border-radius: 6px;
                  color: #FFFFFF;
                }
              }

              .price-box {
                line-height: 16px;
                margin-bottom: 6px;
                .current-price-txt {
                  color: rgb(250, 108, 113);
                  font-size: 16px;
                  margin-right: 4px;
                }
                .original-price-txt {
                  color: rgb(181, 181, 182);
                  font-size: 12px;
                  text-decoration: line-through;
                }
              }
            }
          }
        }
      }

      .tip-txt {
        font-size: 12px;
        color: rgb(86, 86, 86);
        line-height: 30px;
      }
    }
  }
</style>
